<!--
 * @Author: your name
 * @Date: 2020-12-06 12:18:37
 * @LastEditTime: 2021-07-03 14:46:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \microtransaction-frontend\user\src\assets\directive\components\Loading.vue
-->

<template>
    <view class="loading-container" :style="{ '--color': globalColor, height: (height || nodeHeight) + 'px' }">
        <!-- <view class="svg"></view> -->
        <u-loading mode="flower" size="130" />
        <text class="text">
            {{ text }}
        </text>
    </view>
</template>
<script>
export default {
    props: {
        text: {
            type: String,
            default: "请稍后"
        },
        height: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            nodeHeight: ""
        };
    },
    mounted() {
        uni.createSelectorQuery()
            .select(".settingAdmin")
            .boundingClientRect(data => {
                this.nodeHeight = data.height;
            })
            .exec();
    },
    methods: {}
};
</script>

<style lang="scss" scoped>
.loading-container {
    transition: all 0.5s;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2002;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 1;
    &.close {
        opacity: 0;
    }

    .text {
        color: #fff;
        font-size: 28rpx;
        margin-top: 10rpx;
    }
}
</style>
